<template>
  <div>
    <el-upload
      class="avatar-uploader"
      :action="qiniuUrl"
      :data="postData"
      list-type="picture-card"
      :limit="5"
      :before-upload="beforeAvatarUpload"
      :on-success="handleAvatarSuccess"
      :on-remove="handleRemove"
      :on-preview="handlePreview"
      :file-list="fileList">
      <div class="upload-box" @click="fileClick()">
        <i class="el-icon-plus avatar-uploader-icon" style="color: rgb(58, 142, 230)"></i>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  import * as qiniuAPI from '@/api/qiniu'
  export default {
    name: 'by_upload',
    props: {
      qiniu_res: {
        type: Array,
        default: function() {
          return []
        }
      }
    },
    data() {
      return {
        name: '',
        qiniuUrl: 'http://up-z2.qiniup.com',
        postData: {
          token: ''
        },
        fileList: [],
        imageUrl: '',
        dialogImageUrl: '',
        dialogVisible: false,
        currentImageName: '',
        currentImageFormat: ''
      }
    },
    mounted() {
      const that = this
      const a = this.qiniu_res
      for (let i = 0; i < a.length; i++) {
        qiniuAPI.getUrl({
          key: a[i].key
        }).then(res => {
          that.fileList.push({
            name: a[i].key,
            response: { key: a[i].key, hash: a[i].hash },
            url: res.data.url
          })
        })
      }
    },
    methods: {
      // 选择文件时 获取token
      fileClick() {
        const that = this
        qiniuAPI.getToken().then(res => {
          that.postData.token = res.token
          console.log(that.postData)
        }).catch(err => {
          console.log(err)
        })
      },
      // 上传文件前 做一些大小和文件格式校验
      beforeAvatarUpload(file) {
        this.currentImageName = file.name
        this.currentImageFormat = file.type
        // this.postData.key = null
        // const isJPG = file.type === 'image/jpeg'
        const isJPG = true
        const isLt2M = file.size / 1024 / 1024 < 20

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('图片大小不能超过 20MB!')
        }
        return isJPG && isLt2M
      },
      // 上传成功后
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw)
        // 将本地存储的图片信息拼接传到自己的服务器
        res.key = this.currentImageName
        res.format = this.currentImageFormat
        this.qiniu_res.push(res)
        this.fileList.push(file)
      },
      // 移除文件
      handleRemove(file, fileList) {
        // 将删除后的数据复制到fileList
        this.fileList = fileList
        // 同时在将要把抛出的数据中删除
        const hash = file.response.hash
        const a = this.qiniu_res
        for (let i = 0; i < a.length; i++) {
          if (a[i].hash === hash) {
            a.splice(i, 1)
            console.log('删除', this.qiniu_res)
          }
        }
      },
      // 预览文件
      handlePreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      }
    }
  }
</script>

<style scoped>
  .el-upload--picture-card{
    line-height: 0;
  }
</style>
